<template>
    <div class="nutrition-analysis">
      <el-card>
        <div class="card-header">
          <span>营养报告</span>
        </div>
        <div class="card-body">
          <p>总热量: {{ totalCalories }} kcal</p>
          <p>蛋白质: {{ totalProtein }} g</p>
          <p>脂肪: {{ totalFat }} g</p>
          <p>碳水化合物: {{ totalCarbs }} g</p>
        </div>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const totalCalories = ref(500);
  const totalProtein = ref(20);
  const totalFat = ref(10);
  const totalCarbs = ref(80);
  </script>
  
  <style scoped>
  .nutrition-analysis {
    padding: 20px;
  }
  .card-header {
    font-size: 16px;
    color: #666;
  }
  .card-body {
    margin-top: 10px;
  }
  </style>